<!--
 * @Descripttion: 
 * @Author: YuZhenJing
 * @Date: 2020-01-20 13:43:32
 * @LastEditors  : YuZhenJing
 * @LastEditTime : 2020-01-21 15:22:03
 -->
<template>
  <div class="user-role-execute">
    <div style="text-align: center">
      <el-transfer
        :data="roleData"
        :titles="['可选角色', '已选角色']"
        style="text-align: left; display: inline-block"
        v-model="selectedData"
      ></el-transfer>
    </div>
  </div>
</template>
<script>
import { getRoleByManager } from '@/service/roles'
export default {
  data() {
    return {
      roleData: [],
      selectedData: []
    }
  },
  methods: {
    getRoleByManager,
    loadManager(userId) {
      this.getRoleByManager(() => {
        this.getRoleByUser(userId)
      })
    },
    //根据用户Id获取角色信息
    getRoleByUser(userId) {
      const options = this.$html.get('user/roleByUser/' + userId)
      options
        .then(data => {
          if (data.returnType == 'success') {
            this.selectedData = data.returnData
          }
        })
        .catch(() => {
          console.log('error:userRoleManager/getRoleByUser')
        })
    },
    // 保存用户角色
    saveUserRole(userId) {
      let userRoleData = {
        userId: userId,
        roleIds: this.selectedData
      }
      return this.$html.postJson('user/saveUserRole', userRoleData)
    }
  }
}
</script>
<style lang="stylus">
.el-transfer-panel
  width 300px
  .el-transfer-panel__body
    height 300px
</style>
